<template>
	<view class="content_title" :style="{paddingTop:statusBarHeight+'px',height:64*opacity+'rpx',paddingBottom:16*opacity+'rpx'}">
		<view :style="{display:'flex',opacity:opacity}">
		<view style="padding-left: 30rpx;" @click="goBack">
			<image class="arrow" src="@/static/image/arrow_left_white.png"/>
		</view>
		<view v-if="title" class="title" :style="{width: titleWidth}">{{title}}</view>
		<view class="input_wrap" v-if="input">
				<image class="search" src="@/static/image/search.png"/>
				<view style="width: calc(100% - 96rpx)">
					<input type="text" @focus="focus" @blur="blur"
						   @input="inputs"
						   v-model="text" placeholder-style="color:#B6BFC6"  placeholder="请输入">
				</view>
				<image v-show="text" class="search" @click="inputw" src="@/static/image/input_delete.png"/>
		</view>
		<view v-if="titleList.length" class="title_list">
			<view v-for="(item,index) in titleList" @click="changeTitleList(index)"
				  :style="{lineHeight:titleIndex==index?'64rpx':'54rpx',marginTop:titleIndex==index?'0rpx':'10rpx',
				  color:titleIndex==index?'#2D2E33':'#9197AE',fontSize:titleIndex==index?'36rpx':'28rpx'}">
				{{item}}
			</view>
		</view>
		<view v-if="imgList.length" class="img_list">
			<image v-for="item in imgList" @click="onClick(item.click)"  :src="`../../../static/image/${item.img}.png`"/>
		</view>
		</view>
	</view>
</template>

<script>
	import util from '@/common/util.js';
	export default {
		props: {
			titleWidth: {
				type: String,
				default: 'auto'
			},
            title: {
				type: String,
				default: ''
			},
            input: {
                type: Boolean,
                default: false
            },
			titleList: {
				type: Array,
				default: []
			},
			titleIndex: {
				type: Number,
				default: 0
			},
			opacity: {
				type: Number,
				default: 1
			},
			imgList: {
				type: Array,
				default: []
			},
		},
		components: {

		},
		data() {
			return {
				statusBarHeight:uni.getSystemInfoSync().statusBarHeight+7,
				text:'',
				temp:'',
			}
		},
		onLoad(options) {

		},
		methods: {
			focus(e){
				this.$emit('focus',true)
			},
			blur(){
				this.$emit('focus',false)
			},
			inputw(){
				this.text=''
				if(this.text!=this.temp){
					this.$emit('search',this.text)
					this.temp=this.text
				}
			},
			inputs(){
				setTimeout(()=>{
					this.text = util.noEmoji(this.text)// .replace(/[^\u4E00-\u9FA5|\d|\a-zA-Z|\r\n\s,.?!，。？！…—&$=()-+/*{}[\]]|\s/g, '')
					if(this.text!=this.temp){
						this.$emit('search',this.text)
						this.temp=this.text
					}
				},100)
			},
			onClick(click){
				this.$emit(click)
			},
			changeTitleList(index){
				this.$emit('changeTitleList',index)
			},
			goBack(){
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>
<style>

</style>
<style lang="less" scoped>
	.content_title {
		background: #01B7FC;
		width: calc(100vw - 30rpx);
		/*justify-content: space-between;*/
		padding:0 30rpx 16rpx 0;
		.arrow{
			width: 64rpx;
			height: 64rpx;
			display: block;
			margin: 0rpx 0rpx 0 -20rpx;
		}
		.title{
			color: white;
			font-size: 34rpx;
			line-height:64rpx;
			white-space: nowrap;
            text-align: center;
            font-weight: bold;
		}
		.input_wrap{
			height:64rpx;
			background:rgba(245,246,249,1);
			border-radius:32rpx;
			padding: 0 20rpx;
			display: flex;
			/*width: auto;*/
			width: 100%;
			margin-left: 22rpx;
			view{
				display: flex;
				flex-direction: column;
				justify-content: center;
				/*input{*/
					/*width: 100%;*/
				/*}*/
			}
			.search{
				width: 28rpx;
				height: 28rpx;
				display: block;
				margin: 18rpx 10rpx;
			}

		}
		.title_list{
			display: flex;
			justify-content: center;
			line-height:64rpx;
			height: 64rpx;
			text-align: center;
			/*position: absolute;*/
			width: 66vw;
			margin-left: calc(20vw - 88rpx);
			view:first-child{
				margin-right: 80rpx;
			}
		}
		.img_list{
			display: flex;
			image{
				width: 38rpx;
				height: 38rpx;
				margin:12rpx 0 0  38rpx;
			}
		}
	}
</style>
